<template>
    <el-dialog title="新增汇总列"
               :visible.sync="visible"
               width="30%"
               :before-close="handleClose">
        <el-form :model="form" :rules="rules"  ref="form"  label-position="left">
            <el-form-item label="汇总列名" :label-width="formLabelWidth" prop="columnName">
                <el-input v-model="form.columnName" autocomplete="off" placeholder="请输入汇总列名称"></el-input>
            </el-form-item>
            <el-form-item label="分组字段" :label-width="formLabelWidth" prop="groupFields">
                <el-popover
                    v-model="groupVisible"
                    placement="bottom"
                    width="200"
                    trigger="click">
                    <el-button slot="reference" type="text" icon="el-icon-s-grid">选择分组字段</el-button>
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                    <div style="margin: 15px 0;"></div>
                    <div style="max-height: 200px;overflow-y: auto">
                        <el-checkbox-group v-model="checkedColumn" @change="handleCheckedChange">
                            <el-checkbox v-for="column in columns" :label="column" :key="column.name">
                                <span :class="['iconfont',iconClass(column.type)]"></span>
                                {{column.name}}
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>
                    <div style="text-align: right; margin: 0">
                        <el-link :underline="false" @click="handleClear" type="info">清空</el-link>
                        <el-link :underline="false" @click="groupVisible = false" type="primary" class="btn-link-save">确定</el-link>
                    </div>
                </el-popover>
                <div>
                    <el-tag
                        v-for="tag in checkedColumn"
                        :key="tag.name"
                        closable
                        size="mini"
                        type="info"
                        @close="handleCloseTag(tag)">
                        {{tag.name}}
                    </el-tag>
                </div>
            </el-form-item>
            <el-form-item label="汇总字段" :label-width="formLabelWidth" prop="fieldName">
                <el-select v-model="form.fieldName" placeholder="请选择汇总字段" @change="handleFieldChange">
                    <el-option v-for="item in columns" :label="item.name" :value="item.enName" :key="item.enName"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="汇总方式" :label-width="formLabelWidth" prop="summaryMethod">
                <el-select v-model="form.summaryMethod" placeholder="请选择汇总方式">
                    <el-option v-for="item in summaryMethods" :label="item.name" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-link :underline="false" @click="cancel" type="info">取 消</el-link>
            <el-link :underline="false" @click="save" type="primary"  class="btn-link-save">确 定</el-link>
        </div>
    </el-dialog>
</template>

<script>/**
 * 新增汇总列
 */

import {ADD_TABLE_COL} from '@api/url';

    export default {
        name: "SummaryColumnIndex",
        data() {
            return {
                form: {
                    columnName: '',
                    groupFields:[],
                    fieldName: '',
                    summaryMethod: '',
                },
                rules: {
                    columnName:[
                        { required: true, message: '请输入汇总列名称', trigger: 'blur' },
                    ],
                    fieldName:[
                        { required: true, message: '请选择汇总字段', trigger: 'blur' },
                    ],
                    summaryMethod:[
                        { required: true, message: '请选择汇总方式', trigger: 'blur' },
                    ],
                },
                formLabelWidth: '100px',
                checkAll:false,
                isIndeterminate:false,
                checkedColumn:[],
                groupVisible:false,
                currentFieldType:''
            }
        },
        props: {
            visible: {
                type: Boolean,
                default: false
            }
        },
        computed:{
            columns(){
                const allFields = sessionStorage.getItem('allFields')
                if(allFields){
                    const _allFields = JSON.parse(allFields)
                    return _allFields.map(item => {
                        return {
                            name:item.value,
                            type:item.dataType,
                            enName:item.name,
                            modelId:item.modelId,
                        }
                    })
                }
                return []
            },
            // 汇总方式
            summaryMethods(){
                let type = ''
                if(this.form.fieldName){
                    const field = this.columns.find(item => item.enName === this.form.fieldName)
                    if(field){
                        type = field.type
                    }
                }
                return {
                    STRING:[{name:'计数',value:'count'}],
                    NUMBER:[{name:'求和',value:'sum'}],
                    VARCHAR2:[{name:'计数',value:'count'}]
                }[type]
            },
        },
        watch:{
            checkedColumn(v){
                this.isIndeterminate = !(v && v.length === 0 || v.length === this.columns.length);
            },
            form:{
                deep:true,
                handler(v){
                    // console.log(v)
                }
            },
        },
        methods: {
            handleClose(done) {
                done()
                this.$emit('cancel')
            },
            cancel() {
                this.$refs.form.resetFields()
                this.handleClear()
                this.$emit('cancel')
            },
            save() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.form = Object.assign(this.form,{groupFields:this.checkedColumn.map(item => item.enName)})
                        const params = Object.assign(this.form,{
                            modelId:this.columns[0].modelId
                        })
                        this.$http.post(ADD_TABLE_COL, this.form).then(res => {
                            this.$emit('saveSuccess')
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleCheckAllChange(val) {
                this.checkedColumn = val ? [...this.columns] : [];
            },
            handleCheckedChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.columns.length;
            },
            handleClear(){
                this.groupVisible = false;
                this.checkedColumn = []
                this.checkAll = false
            },
            handleCloseTag(tag){
                this.checkedColumn.splice(this.checkedColumn.findIndex(item => item.name === tag.name), 1)
            },
            handleFieldChange(fieldName){
                if(!this.form.summaryMethod){
                    return
                }
                const field = this.columns.find(item => item.enName === fieldName)
                if(this.currentFieldType !== field.type){
                    this.form.summaryMethod = ''
                    this.currentFieldType = field.type
                }
            },
            // 字段类型iconClass
            iconClass(fieldType){
                return {
                    STRING:'icon-wenben',
                    NUMBER:'icon-number',
                    VARCHAR2:'icon-wenben',
                }[fieldType]
            }
        }
    }
</script>

<style scoped lang="stylus">
    .el-checkbox-group{
        .el-checkbox{
            display block !important
        }
    }
    .el-tag{
        margin-right 10px
    }
    .el-link.btn-link-save{
        margin-left 20px
    }

</style>
